<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-temporary-pass-container`]" :style="{ height: `calc(100vh - ${$Platform.navbar}px)` }">
      <uv-form labelPosition="left" label-width="150" :model="formData" :rules="rules" ref="form">
        <uv-form-item>
          <view class="form-item-container">
            <view class="title">设置新的房间密码</view>
            <view class="tips">请输入6位数组作为房间密码</view>
          </view>
        </uv-form-item>
        <uv-form-item label="房间号" prop="room_name" borderBottom>
          <uv-input v-model="formData.room_name" disabled disabledColor="white" inputAlign="right" border="none"> </uv-input>
        </uv-form-item>
        <uv-form-item label="新密码" prop="pass" borderBottom>
          <uv-input v-model="formData.pass" maxlength="6" type="password" inputAlign="right" placeholder="请输入新密码" border="none"> </uv-input>
        </uv-form-item>
        <uv-form-item label="确认新密码" prop="new_Pass" borderBottom>
          <uv-input v-model="formData.new_Pass" maxlength="6" type="password" inputAlign="right" placeholder="请确认新密码" border="none"> </uv-input>
        </uv-form-item>
        <uv-button type="primary" :disabled="!formData.pass || !formData.new_Pass" text="确认修改" customStyle="margin-top: 30px" @click="submit"></uv-button>
      </uv-form>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { modifyPass } from './api'

export default {
  name: 'setting',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      formData: {
        lock_id: '',
        room_name: '',
        pass: '',
        new_Pass: '',
      },
      rules: {
        pass: [
          {
            required: true,
            // 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
            validator: (rule, value, callback) => {
              console.log('123', rule)
              if (value.length != 6) return false
              let regex = /^\d+$/
              return regex.test(value)
            },
            message: '密码必须为6位数字密码',
            trigger: ['blur'],
          },
        ],
        new_Pass: [
          {
            required: true,
            // 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
            validator: (rule, value, callback) => {
              return this.formData.pass === value
            },
            message: '新密码与确认密码不一致',
            trigger: ['blur'],
          },
        ],
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    const { lock_id, room_name, code } = this.$Route.query
    this.formData.lock_id = lock_id
    this.formData.room_name = room_name
    this.formData.code = code
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async submit() {
      const { lock_id, pass, code } = this.formData
      const { data, errcode } = await modifyPass({ code, lock_id, pwd: pass, is_myself: '' })
      if (errcode === 0) {
        this.$ROUTE.go('/pages/subpackage/door-lock/index')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('temporary-pass-container')} {
  position: relative;
  background: white;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  .form-item-container {
    padding: 30px 0;
    .title {
      font-weight: 500;
      font-size: 24px;
    }
  }
  .tips {
    font-size: 24rpx;
    color: #666666;
    margin: 20px 0 10px;
  }
  .primary {
    color: $uv-primary;
  }
  .center {
    text-align: center;
  }
}
</style>
